<template>
  <el-dialog title="修改角色" :visible="showDialog" width="50%" @open="onOpen" @close="onClose" @closed="onReset">
    <el-form ref="formRef" label-width="80px" :model="form" :rules="formRules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="form.description" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getRoleAPI, updateRoleAPI } from '@/api/role.js'

export default {
  name: 'EditRole',
  props: {
    // 注意：在组件内定义 props 属性，如果属性名由多个单词构成，推荐使用小驼峰
    // 控制对话框的显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    // 要修改的角色的 id
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 数据对象
      form: {
        // 角色名称
        name: '',
        // 角色描述
        description: ''
      },
      // 验证规则对象
      formRules: {
        name: [{ required: true, message: '角色名称不能为空！', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空！', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 对话框打开的事件
    async onOpen() {
      // 调用接口
      const result = await getRoleAPI(this.id)
      // 进行数据回显
      this.form = result.data
    },
    // 点击了右上角的 x 号
    onClose() {
      this.$emit('update:showDialog', false)
    },
    // 点击确定按钮，添加新角色
    onConfirm() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return
        // TODO：调用修改的接口
        await updateRoleAPI(this.form)
        // 提示用户、关闭对话框、刷新列表数据
        this.$message.success('修改角色成功！')
        this.$emit('update:showDialog', false)
        this.$emit('reload')
      })
    },
    // 监听对话框关闭完成的事件
    onReset() {
      this.$refs.formRef.resetFields()
      this.$emit('update:id', '')
      this.form = {}
    }
  }
}
</script>

<style lang="scss" scoped></style>
